import React from 'react'

import styles from '../../css/movie_detail.scss'

import { Spin, Alert, Rate } from 'antd'

export default class MovieDefault extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      displayFlag: false,
      info: [],
      img: '',
      alias: '',
      director: [],
      actor: [],
      year: '',
      date: '',
      duration: 0,
      votes: 0,
      rate: 0,
      description: ''
    }
  }

  render() {
    if (this.state.displayFlag) {
      return <div className={styles.detailBox}>
        <div className={styles.detailLeft}>
          <div className={styles.nameBox}>
            <span>{`${this.state.info['name']}`}</span>
            <span style={{display: this.state.year ? 'inline' : 'none'}}>{`(${this.state.year})`}</span>
          </div>
          <div className={styles.imgBox}>
            <img src={this.state.img} alt="sorry, img miss" />
          </div>
        </div>
        <ul className={styles.detailCenter}> 
          <li>导演：{this.state.director.map(item => `${item.data[0].name}(${item.data[1].name})`).join(' / ')}</li>
          <li>主演：{this.showNames(this.state.actor, this.state.info['lang'])}</li>
          <li style={{display: this.state.alias ? 'block' : 'none'}}>译名：{this.state.alias}</li>
          <li>类型：{this.state.info['genre']}</li>
          <li>语言：{this.state.info['language']}</li>
          <li>上映日期：{this.showDate(this.state.date)}</li>
          <li>片长：{Math.ceil(this.state.duration/60) + '分钟'}</li>
          <li>简介：{this.state.info['description']}</li>
        </ul>
        <div className={styles.detailRight}>
          <span>豆瓣评分</span>
          <div className={styles.rateBox}>
            <span className={styles.rate}>{this.state.rate}</span>
            <span className={styles.star}>
              <Rate allowHalf disabled defaultValue={Math.floor(this.state.rate/0.5/2)*0.5}/>
              <div>{this.state.votes + '人评分'}</div>
            </span>
          </div>
        </div>
      </div>
    } else {
      return <Spin tip="Loading...">
      <Alert
        message="页面加载中。。。"
        description="精彩内容，马上呈现！"
        type="info"
      />
    </Spin>
    }
  }

  renderDetail = () => {
    const url = `https://movie.querydata.org/api?id=${this.props.match.params.id}`
    fetch(url,{
      method: 'GET',
      mode: 'cors'
    })
    .then(res => res.json())
    .then(data => {
      this.setState({
        info: data.data[0],
        img: data.data[0].poster,
        alias: data.alias,
        director: data.director,
        actor: data.actor,
        year: data.year,
        date: data.dateReleased,
        duration: data.duration,
        votes: data.doubanVotes,
        rate: data.doubanRating,
        displayFlag: true,
        description: ''
      }, () => {
        console.log(data);
        this.render()
      })
    })
    .catch(err => console.log(err))
  }

  showNames = (nameList, lang) => {
    var nameStr = []
    for (let i = 0; i< nameList.length; i++) {
      if (i <= 24) {
        if (lang === 'Cn') {
          nameStr.push(nameList[i].data[0].name)
        } else {
          nameStr.push(nameList[i].data[0].name + '(' + nameList[i].data[1].name + ')')
        }
      }
    }
    return nameStr.join('/')
  }

  showDate = (date) => {
    if (date) {
      return date.slice(0, 10)
    } else {
      return ''
    }
  }

  componentWillMount() {
    this.renderDetail()
  }
}